<template>
	<view class="container">
		<!-- <block>
			<tn-button shape="round" backgroundColor="#1DC069" margin="0rpx 5%" width="90%" height="72rpx"
				fontColor="tn-color-white" openType="getPhoneNumber" @getphonenumber="getPhoneNumber"
				:blockRepeatClick="true">本机号码一键登录</tn-button>
		</block> -->
		<view class="titleImg">
			<!-- <image src="../../static/imgs/welcome.png" mode=""></image> -->
			欢迎使用
		</view>
		<view class="logoImg">
			<image src="http://182.92.108.71:9001/image/logo.png" mode=""></image>
		</view>
		<view class="textImg">
			<view class="text">
				一切应该尽可能简单，<br />
				但不应该过于简单<br />
				——爱因斯坦
			</view>
			<!-- <image src="../../static/imgs/wellKnow.png" mode=""></image> -->
		</view>
		<view class="wxTip" @click="handleLogin">
			<image src="../../static/imgs/wx_icon.png" />
			微信一键登录
		</view>
		<!-- <button open-type="getUserInfo" @getuserinfo="handleLogin">
			微信一键登录
		</button> -->
		<view class="tipImage">
			<view class="tip"> “第三届全国体育科技创新大赛”获奖产品 </view>
			<view class="tip"> 天津听禾科技有限责任公司 </view>
		</view>
		<!-- 
		<view class="agreement">
			<tn-checkbox size="34" labelSize="24" shape="circle" activeColor="#1DC069"
				v-model="isAgree">登录即代表同意</tn-checkbox><text class="article" @click="goUser">用户协议</text>和<text
				class="article" @click="goPrivate">隐私协议</text>
		</view> -->
		<OpendateWindow v-model="showAuth" @send="getSonValue"></OpendateWindow>
	</view>
</template>
<script>
	import OpendateWindow from "../../components/opendate-Window/opendate-Window.vue";
	import {
		login,
		phoneLogin,
		sendUserInfo
	} from "../../apis/login";
	export default {
		data() {
			return {
				isAgree: false,
				sessionkey: "",
				openid: "",
				showAuth: false,
				userInfo: {}, // 用户头像和昵称
			};
		},
		components: {
			OpendateWindow,
		},
		onLoad(options) {},
		onShow() {
			let hashLogin = uni.getStorageSync("hashLogin") || false;
			if (hashLogin) {
				uni.navigateBack({
					delta: 1,
				});
			}
		},
		methods: {
			handleLogin() {
				this.showAuth = true;
			},
			wxLogin() {
				uni.login({
					provider: "weixin",
					success: (loginRes) => {
						//	打印临时凭证
						console.log("登录成功了！！！！");
						console.log(loginRes.code);
						login({
							code: loginRes.code,
						}).then((tres) => {
							console.log("我的res是！");
							console.log(tres);
							if (tres.status == 200) {
								uni.showToast({
									title: "登录成功",
									icon: "none",
								});
								uni.setStorageSync("token", tres.data.token);
								uni.setStorageSync("userInfo", this.userInfo);
								uni.setStorageSync("hashLogin", true);
								uni.navigateBack();
							} else {
								uni.showToast({
									title: "登录失败，请尝试重新登录",
									icon: "none",
								});
								return false;

								// uni.setStorageSync('userInfo', this.userInfo)
								// uni.setStorageSync('hashLogin', true)
							}
							sendUserInfo({
									avatarUrl: this.userInfo.header,
									openid: tres.data.uid,
									nickname: this.userInfo.nickName,
								})
								.then((res) => {})
								.finally((res) => {
									uni.navigateBack({
										delta: 1,
									});
								});
						});
					},
				});
			},
			checkIsAgree() {
				console.log(666);
				if (!this.isAgree) {
					this.tool.toastTip("请勾选协议!", "none", 1500);
				} else {
					setTimeout(function() {
						uni.navigateBack({
							delta: 1,
						});
					}, 1200);
				}
			},
			getSonValue(e) {
				console.log("选择的头像和昵称", e);
				this.userInfo = e;
				console.log("用户信息", this.userInfo);
				this.wxLogin();
			},
			getPhoneNumber(e) {
				console.log(e);
				if (e.errMsg === "getPhoneNumber:ok") {
					// phoneLogin({
					// 	code: e.code,
					// 	encryptedData: e.encryptedData,
					// 	iv: e.iv
					// }).then(res => {
					// 	console.log(res);
					// })
				}
			},
		},
	};
</script>
<style>
	page {
		margin: 0;
		padding: 0;
		height: 100%;
		width: 100%;
	}

	::-webkit-scrollbar {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		-webkit-appearance: none;
		background: transparent;
	}
</style>
<style lang="less" scoped>
	.dflex() {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.dflexsb() {
		.dflex();
		justify-content: space-between;
	}

	.dflexsa() {
		.dflex();
		justify-content: space-around;
	}

	page {
		// background: #f2f2f3;
	}

	.container {
		width: 100%;
		height: 100%;
		font-family: PingFangSC-Semibold, PingFang SC;
		color: #333;
		padding: 30rpx;
		box-sizing: border-box;

		.titleImg {
			width: 100%;
			text-align: center;
			font-size: 48px;
			font-family: "优设标题黑";
			letter-spacing: 5px;
			// 字体颜色渐变
			background: linear-gradient(to bottom, rgba(110, 88, 170, 1), #9a8bc2);
			background-clip: text;
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			height: fit-content;

			image {
				width: 213px;
				height: 63px;
			}
		}

		.logoImg {
			width: 100%;
			text-align: center;
			margin-top: 29px;

			image {
				width: 295px;
				height: 186px;
			}
		}

		.textImg {
			width: 100%;
			text-align: center;
			margin-top: 24px;
			font-size: 24px;
			font-family: "优设标题黑";

			.text {
				// text-align: left;
				// display: inline-block;
				// background: linear-gradient(to right, rgba(110, 88, 170, 1), rgba(110, 88, 170, 0));
				// background-clip: text;
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
				color: rgba(110, 88, 170, 1);
			}

			image {
				width: 239px;
				height: 94px;
			}
		}

		.wxTip {
			width: 255px;
			height: 38px;
			border-radius: 18px;
			background-color: rgba(4, 190, 2, 1);
			margin: 0 auto;
			margin-top: 53px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			font-family: "优设标题黑";
			color: #fff;

			image {
				// width: 133px;
				// height: 32px;
				width: 40rpx;
				height: 40rpx;
				margin-right: 20rpx;
			}
		}

		.tipImage {
			width: 100%;
			text-align: center;
			margin-top: 22px;
			font-size: 14px;
			font-family: "优设标题黑";

			padding-bottom: 50rpx;

			.tip {
				// background: linear-gradient(to bottom, rgba(110, 88, 170, 1), rgba(121, 72, 234, 0));
				// background-clip: text;
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
				color: rgba(124, 124, 126, 0.5);
			}

			image {
				// width: 239px;
				height: 19px;
			}
		}

		.logo {
			width: 190rpx;
			height: 190rpx;
			.dflex();
			margin: 40rpx auto;
			box-sizing: border-box;
		}

		.phone {
			margin: 30rpx auto;
			font-size: 38rpx;
			font-weight: bolder;
			.dflex();
			color: #3d3d3d;
		}

		.phone:nth-child(1) {
			margin-top: 60rpx;
		}

		.wcLogo {
			width: 80rpx;
			height: 80rpx;
			.dflex();
			margin: 20rpx auto;
		}

		.agreement {
			.dflex();
			position: fixed;
			bottom: 140rpx;
			left: 0rpx;
			right: 0rpx;

			/deep/.tn-checkbox__label {
				color: #808080;
				font-size: 24rpx;
				margin-right: 0rpx !important;
			}

			.article {
				color: #1dc069;
				margin: 0rpx 4rpx;
				font-weight: bolder;
				font-size: 24rpx;
			}
		}
	}
</style>